<template>
  <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <InformationCard title="Edgex服务量">
      <template #extra>
        <EdgexTag />
      </template>
      <span class="items-center flex-1 text-2xl leading-loose truncate">{{
        edgexAmount
      }}</span>
      <IconFont type="icon-amount" />
    </InformationCard>
    <InformationCard title="设备服务量">
      <template #extra><ServiceTag /></template>
      <span class="items-center flex-1 text-2xl leading-loose truncate">{{
        deviceAmount
      }}</span>
      <IconFont type="icon-amount1" />
    </InformationCard>
    <InformationCard title="上次配置服务" class="relative">
      <template #extra>
        <EdgexTag />
      </template>
      <span class="flex-1 text-2xl leading-loose truncate">Last Service</span>
      <a-tag class="absolute bottom-4"
        ><p class="text-xs text-gray-500">739sdf020a-4819f-1s819</p></a-tag
      >
      <IconFont type="icon-previous" />
    </InformationCard>
    <AppendEdgexCard />
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, ref } from "vue";

import IconFont from "@/components/Icons";
import InformationCard from "@/components/cards/InformationCard.vue";
import EdgexTag from "@/components/tags/EdgexTag.vue";
import ServiceTag from "@/components/tags/ServiceTag.vue";
import AppendEdgexCard from "@/components/cards/AppendEdgexCard.vue";
import { Random } from "mockjs";

export default defineComponent({
  name: "EdgexTop",
  components: {
    IconFont,
    InformationCard,
    EdgexTag,
    ServiceTag,
    AppendEdgexCard,
  },
  setup() {
    const edgexAmount = ref<number>(0);
    const deviceAmount = ref<number>(0);
    onBeforeMount(() => {
      edgexAmount.value = Random.integer(20, 30);
      deviceAmount.value = Random.integer(50, 70);
    });
    return { edgexAmount, deviceAmount };
  },
});
</script>

<style scoped lang="scss">
.edgex-top {
}
</style>
<style lang="scss">
.edgex-top {
}
</style>
